<template>
  <div class="header-box">
    <div class="logo">
      <img class="logo-img" src="@/assets/logo.png" alt="">
    </div>
    <div class="menu">
      <div class="menu-title" @click="routerHerf('Home')">
        <span>首页</span>
      </div>
      <div class="menu-title" @click="routerHerf('InRegard')">
        <span>关于博筑</span>
      </div>
      <div class="menu-title" @click="routerHerf('Product')">
        <span>作品展示</span>
      </div>
      <div class="menu-title" @click="routerHerf('Performance')">
        <span>业绩展示</span>
      </div>
<!--      <div class="menu-title">-->
<!--        <span>新闻</span>-->
<!--      </div>-->
      <div class="menu-title" @click="routerHerf('ContactUs')">
        <span>联系我们</span>
      </div>
    </div>
<!--    <el-menu-->
<!--      :default-active="activeIndex2"-->
<!--      class="el-menu-demo"-->
<!--      mode="horizontal"-->
<!--      @select="handleSelect"-->
<!--      background-color="#545c64"-->
<!--      text-color="#fff"-->
<!--      active-text-color="#ffd04b">-->
<!--      <el-menu-item index="Home">首页</el-menu-item>-->
<!--      <el-submenu index="2">-->
<!--        <template slot="title">智慧博物馆</template>-->
<!--        <el-menu-item index="2-1">票务系统</el-menu-item>-->
<!--        <el-menu-item index="2-2">数字资源管理系统</el-menu-item>-->
<!--        <el-menu-item index="2-3">展厅综合控制系统</el-menu-item>-->
<!--        <el-menu-item index="2-4">客流监测分析系统</el-menu-item>-->
<!--        <el-menu-item index="2-5">环境监测控制系统</el-menu-item>-->
<!--        <el-menu-item index="2-6">藏品管理系统</el-menu-item>-->
<!--        <el-menu-item index="2-7">门户网站</el-menu-item>-->
<!--        <el-menu-item index="2-8">观众管理系统</el-menu-item>-->
<!--        <el-menu-item index="2-9">图书文献管理系统</el-menu-item>-->
<!--        <el-menu-item index="2-10">策展管理系统</el-menu-item>-->
<!--        <el-menu-item index="2-11">讲解员管理系统</el-menu-item>-->
<!--        <el-menu-item index="2-12">志愿者管理系统</el-menu-item>-->
<!--        <el-menu-item index="2-13">数字孪生可视化平台</el-menu-item>-->
<!--        <el-menu-item index="2-14">智能运营管理系统</el-menu-item>-->
<!--        <el-menu-item index="2-15">展柜控制系统</el-menu-item>-->
<!--      </el-submenu>-->
<!--      <el-menu-item index="InRegard">关于博筑</el-menu-item>-->
<!--      <el-menu-item index="Performance">业绩展示</el-menu-item>-->
<!--    </el-menu>-->
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      activeIndex2: '1'
    }
  },
  methods: {
    routerHerf(name) {
      this.$router.push({
        name: name
      });
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      this.$router.push({
        name: key
      });
    }
  }
}
</script>

<style scoped lang="less">
.header-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: space-around;
  z-index: 99999;
  .logo {
    margin: auto 0 auto 200px;
    .logo-img {
      width: 100px;
    }
  }
  .el-menu-demo {
    background: rgba(0, 0, 0, 0) !important;
    border: none;
    .el-menu-item {
      height: 100px;
      line-height: 100px;
      background: rgba(0, 0, 0, 0) !important;
    }
    .el-submenu {
      height: 100px;
      background: rgba(0, 0, 0, 0) !important;
      /deep/.el-submenu__title {
        height: 100px;
        line-height: 100px;
        background: rgba(0, 0, 0, 0) !important;
      }
    }
  }
  .menu {
    display: flex;
    height: 100px;
    line-height: 100px;
    font-size: 20px;
    color: #ffffff;
    .menu-title {
      width: 200px;
      cursor: pointer;
      &:hover {
        background: #b7070d;
      }
    }
  }
}
</style>
